iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
1

邊緣人:要約哪一天好呢~
UIDatePicker: (將max跟min改成過去時間)


date picker可以在介面中加入日期、時間的捲軸,讓使用者可以依此輸入時間日期甚至是時間區間(例如倒數計時器)等資訊。

(圖片來源:https://developer.apple.com/documentation/uikit/uidatepicker)

date picker跟button同樣支援輔助使用,若VoiceOver被允許運作,當使用者觸碰到date picker命運轉輪的時候,語音就會回饋title、特性以及相關說明。例如使用者在鬧鐘裡的新增鬧鐘觸碰小時捲軸的時候,系統會回饋以下語音:

"2 o'clock. Picker item. Adjustable. Swipe up or down with one finger to adjust the value.”

另外,UIDatePicker的形式是不給客製化的,只能捲時間跟日期。
如果你想要卷whatever u want,你需要設定一個list裝你要捲的內容,然後使用UIPickerView。

建立UIDatePicker

  • 設定DatePicker的mode,可選擇Date/Time/Date and Time/Count Down Timer 4種。
  • 設定時間的上下限(如果有需要的話)。
  • 為UIDatePicker設定一個action。
  • 設定auto layout。

跟UIButton一樣,你可以從Library裡拉一個UIDatePicker,也可以用程式初始化一個UIDatePicker:

let newDatePicker = UIDatePicker()
let constraitDatePicker = UIDatePicker(frame: CGRect(x: 0, y: UIScreen.main.bounds.height - 250, width: UIScreen.main.bounds.width , height: 200))

Attribute of UIDatePicker

Mode

這在前面有介紹過,UIDatePicker的mode有4種,分為Date/Time/Date and Time/Count Down,使用以下程式碼宣告:

newDatePicker.datePickerMode = UIDatePicker.Mode.dateAndTime
newDatePicker.datePickerMode = UIDatePicker.Mode.countDownTimer

Locale

Locale是指所在地區,因為日期及時間的顯示方式會依照地區的不同而不一樣。
DatePicker跟Button一樣支援國際化,如果想要DatePicker國際化的話,就不需要特別設定Locale,在default的狀況下,系統會自動偵測使用者的語言與區域來顯示datePicker。

但如果你94要全世界用你app的人都只能使用特定語言區域的DatePicker的話,設定locale的方法如下:

newDatePicker.locale = Locale(identifier: "Chinese")
newDatePicker.locale = Locale(identifier: "French")

Interval

如果你的DatePicker與時間相關的話,可以設定一個time interval,決定你的分鐘捲軸間隔。需要注意的是,因為一小時是60分鐘,所以你可以設定的time interval必須是60的公因數,最小是1,最大是30,預設值是1。

newDatePicker.minuteInterval = 5

Date

不知道大家有沒有發現,Date Picker一開始顯示的時間,預設就是啟動Date Picker的current time。
然後大家就知道我寫這篇文章的時間點的,科技人真是沒有秘密啊~
但其實Date Picker也可以指定剛開始顯示的時間喔~首先要設定一個date components:

let dateComponents = DateComponents(calendar: Calendar.current, timeZone: nil, era: nil, year: 1989, month: 10, day: 7, hour: 6, minute: 45, second: nil, nanosecond: nil, weekday: nil, weekdayOrdinal: nil, quarter: nil, weekOfMonth: nil, weekOfYear: nil, yearForWeekOfYear: nil)

dateComponents裡的參數都是optional,所以你不指定的話直接拿掉也可以,只是一方面我覺得很有趣,一方面也給大家看看有哪些參數可以設定,所以就用nil來替代了XD還有什麼nanosecond的也太酷了吧~

接下來再把這個DateComponent的Date指定給DatePicker:

newDatePicker.setDate(dateComponents.date! , animated: true)

初始值就是我生日了~原來我出生的時候是星期六啊~
啊!不小心暴露年齡了QQ哭爆
我平常做人應該沒有很失敗吧!大家不要拿我的生辰八字去做壞事啊~

這裡date要加驚嘆號,是因為當我指定dateComponents的date時,他會從dateComponent裡抓出date所需要的資料。但如剛剛所說,dateComponents裡的參數全是optional,他不一定抓得到資料,代表date的型態也是optional,所以需要加驚嘆號強迫她unwrap,才可以指定給setDate使用。

Constraints

constraints限制了可選擇日期的區間,一樣先設定2個dateComponents

let minimumDateConponent = DateComponents(calendar: Calendar.current, year: 2019, month: 9, day: 1)
let maximumDateConponent = DateComponents(calendar: Calendar.current, year: 2019, month: 9, day: 30)

這裡有一個需要注意的部分是:maximum的日期不能比minimum還早,否則會發生錯誤。
接下來再把時間指定給個別的參數:

newDatePicker.minimumDate = minimumDateConponent.date!
newDatePicker.maximumDate = maximumDateConponent.date!

從demo中可以看到,除了我設定的區間9/1-9/30以外,其他不能選擇的都變成灰色了,所以如果我滑到10/18,日期就會跳到離10/18最近的日期區間9/30。

所...所以UIDatePicker把min跟max都設成過去的時間,是想跟我約會但害羞嗎?
真是個傲嬌的孩子呢~

Timer

如果DatePicker的mode是CountDownTimer的話,可以設定timer來指定countdown timer的初始值,預設值為1分鐘。
使用countDownDuration這個變數,時間單位為秒(但在畫面上會以分鐘顯示)。

newDatePicker.countDownDuration = 290

秒數轉換分鐘是採無條件捨去,像範例中的290秒只顯示4分鐘。
通常countDownTimer會搭配Timer(倒數計時器,非countDownDuration),不過如果以這個時間開始倒數,是會倒數290秒還是240秒呢?其實我也不清楚。

所以接下來會稍微離題介紹一下timer,並使用DatePicker與timer做個小小的倒數器。

都在讀文件好久沒實作app了,我好興奮啊~~


上一篇
Day 04: 你所不知道的UIButton的另一面......
下一篇
Day 06: 回到過去吧!前往命運石之門
系列文
Hey! UIKit, 做個朋友吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言